<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info {
            width: auto;
            border-radius: 1px solid red;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <img src="./images/精神状态.gif" style="background-color: gray;float: left; width: 150px;" width="150px">
            
        </div>
        <div style="position: relative; width:200px; clear: both; display: inline-block;">
            <p id="info" style="overflow: hidden;">
                产地严选 爱媛果冻橙 单果70mm+ 礼盒随机2.5kg+0.1kg
            </p>
            <!-- <div style="width: auto;position: absolute;">
                <p style="display: inline-block;">$26.99</p>
                <div style="width: auto;position: relative; display: inline-block;">
                    <button style="float: right;">加入购物车</button>
                </div>
                
            </div> -->
            <div style="width: auto;position: absolute; display: flex;">
                <!-- <div style="display: inline-block;">$26.99</div> -->
                <p style="flex: 1;">$26.99</p>
                <div style="position: relative; flex: 1;">
                    <button>加入购物车</button>
                </div>
            
            </div>
        
        </div>
    </div>


</body>

<script>
    // const tree = {
    //     key: '第一层-1',
    //     children: [
    //         {
    //             key: '第二层-1-1',
    //             children: [
    //                 {
    //                     key: '第三层-1-1',
    //                     children: [],
    //                 },
    //                 {
    //                     key: '第三层-1-2',
    //                     children: [],
    //                 }
    //             ]
    //         },
    //         {
    //             key: '第二层-2-1',
    //             children: [
    //                 {
    //                     key: '第三层-2-1',
    //                     children: [],
    //                 }
    //             ]
    //         },
    //         {
    //             key: '第二层-3-1',
    //             children: [
    //                 {
    //                     key: '第三层-3-1',
    //                     children: [],
    //                 }
    //             ]
    //         },
    //     ]
    // }


    // const DFS = (node) => {
    //     let stack = []
    //     let nodes = []

    //     if (node) {
    //         stack.push(node)

    //         while (stack.length) {
    //             const temp = stack.pop()
    //             const children = temp.children

    //             nodes.push(temp)

    //             for (let i = children.length - 1; i >= 0; i--) {
    //                 stack.push(children[i])
    //             }
    //         }
    //     }
    //     return nodes
    // }

    // console.log(DFS(tree), '深度优先搜索的非递归实现')

</script>

</html>